<script setup>
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  ready: {
    type: Boolean,
    default: false,
  },
})
const taskTypeMap = {
  销毁: { type: 'warning', name: '销毁' },
  包装: { type: 'success', name: '包装' },
  转运: { type: 'info', name: '转运' },
}

const isNoData = computed(() => props.ready && !props.data.length)
</script>

<template>
  <section class="smart-task">
    <UiAutoScroll v-show="data.length" :list="data" :speed="3" :wait-time="2000" :single-height="320">
      <div v-for="(item, index) in data" :key="index" class="smart-task__item">
        <div class="smart-task__wrap">
          <div class="robot-name">
            {{ item.robotName }}
          </div>
          <div class="working-time">
            <i i-svg-clock />
            累计时长 :
            <span>{{ item.workingHours.toFixed(2) }}</span>
            小时
          </div>
          <div class="task-type">
            <n-tag v-if="item.robotTaskType === ''" class="tag-unrun" :color="{ color: '#EEEEEE2A', textColor: '#AAA', borderColor: '#777' }">
              未运行
            </n-tag>
            <n-tag v-else-if="taskTypeMap[item.robotTaskType]" :type="taskTypeMap[item.robotTaskType].type">
              {{ taskTypeMap[item.robotTaskType].name }}
            </n-tag>
          </div>
        </div>
      </div>
    </UiAutoScroll>
    <UiEmpty v-show="isNoData" />
  </section>
</template>

<style lang='scss' scoped>
.smart-task {
  height: 100%;
  padding: 0 0 20px;

  &__item {
    height: 64px;
    margin-top: 20px;
    background: linear-gradient(271deg,rgb(115 163 204 / 2%) 0%, #73a3cc1A 96%);
    border-bottom: 1px solid;
    border-radius: 2px;
    border-image: linear-gradient(270deg, rgb(115 163 204 / 0%) 0%, #73a3cc 51%, rgb(115 163 204 / 0%) 100%) 1 1;
  }

  &__wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 20px;
  }

  .robot-name,.working-time {
    flex: 1;
    min-width: fit-content;
  }

  .robot-name {
    color: $color-text-light;
  }

  .task-type {
    width: 30%;
    text-align: right;
  }
}
</style>
